<template>
    <div class="contentBox">
        <el-row :gutter="10">
            <el-col class="pb-2" :span="6" :xs="24" v-for="(item, index) in list" :key="index">
                <el-card shadow="never">
                    <template #header>
                        <div class="flex-y-center justify-between">
                            <div class="flex-y-center">
                                <Icon :name="item.icon" :color="item.color" size="30" />
                                <span class="ml-1">{{ item.name }}</span>
                            </div>
                            <div class="text-xs text-gray">{{ item.date }}</div>
                        </div>
                    </template>
                    <div class="flex-y-center justify-between">
                        <div class="text-3xl">{{ item.number }}</div>
                        <div class="flex-center" v-if="item.ratio">
                            <el-button type="primary" @click="item.function" size="small" plain>{{
            item.ratio
        }}</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!--  @handle-reset="resetParams" @handle-search="getList" -->
        <div class="page-card h-full" v-loading="loading">
            <el-table :data="tableData">
                <el-table-column label="ID" prop="_id" align="center" />
                <el-table-column label="提现金额" prop="applyMoney" align="center" />
                <el-table-column label="账户类型" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.binkType == 1" type="success">对公账户</el-tag>
                        <el-tag v-else>个人账户</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="userName" align="center" />
                <el-table-column label="纳税人识别号" prop="userNo" align="center" />
                <el-table-column label="开户行" prop="binkName" align="center" />
                <el-table-column label="银行账号" prop="binkNo" align="center" />
                <el-table-column label="手机号" prop="userPhone" align="center" />
                <el-table-column label="发票接收邮箱" prop="emaill" align="center" />

                <el-table-column label="状态" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == 0" type="success">待审核</el-tag>
                        <el-tag v-else-if="scope.row.status == 2" type="danger">已拒绝</el-tag>
                        <el-tag v-else type="warning">已提现</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="打款金额" prop="payMoney" align="center" />
                <el-table-column label="打款时间" prop="payTime" align="center" />

                <el-table-column label="创建时间" prop="createTime" align="center" />
                <el-table-column label="拒绝备注" prop="refuseRemark" align="center" />
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="text" @click="setFunDataComngter(scope.row)"
                            :disabled="scope.row.status == 1">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog v-model="showGetMayBox" :title="opentype === 'add' ? '申请提现' : '编辑提现'" width="800">
            <el-form :model="subFrom" label-width="100" style="max-width: 600px">
                <el-form-item label="账户类型">
                    <el-radio-group v-model="subFrom.binkType">
                        <el-radio :label="1">对公账户</el-radio>
                        <el-radio :label="2">个人账户</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="subFrom.userName" style="width: 200px;" placeholder="请输入名称" />
                </el-form-item>
                <el-form-item label="纳税人识别号" v-if="subFrom.binkType == 1">
                    <el-input v-model="subFrom.userNo" style="width: 200px;" placeholder="请输入纳税人识别号" />
                </el-form-item>
                <el-form-item label="开户行">
                    <el-input v-model="subFrom.binkName" style="width: 200px;" placeholder="请输入开户行地址" />
                </el-form-item>
                <el-form-item label="银行账号">
                    <el-input v-model="subFrom.binkNo" style="width: 200px;" placeholder="请输入银行账号" />
                </el-form-item>
                <el-form-item label="手机号" v-if="subFrom.binkType == 1">
                    <el-input v-model="subFrom.userPhone" style="width: 200px;" placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="发票接收邮箱" v-if="subFrom.binkType == 1">
                    <el-input v-model="subFrom.emaill" style="width: 200px;" placeholder="请输入发票接收邮箱" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showGetMayBox = false">取消</el-button>
                    <el-button type="primary" @click="upGetMayFunc()">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { canSettleAmount, submitWithdraw, gettlementOrder, puttlementOrder } from '@/api/orders';
import { useTable } from '@/hooks/useTable';
import { reactive, ref } from "vue";
defineOptions({ name: 'TopCard' });
const showGetMayBox = ref(false)
const opentype = ref('add')

const subFrom = reactive<any>({
    binkType: 1,
    userName: '',
    userNo: '',
    binkName: '',
    binkNo: '',
    userPhone: '',
    emaill: ''
})

const gotoWithdraw = () => {
    showGetMayBox.value = true
    opentype.value = 'add'
}

function upGetMayFunc() {
    // console.log(subFrom);
    showGetMayBox.value = false
    if (opentype.value == 'add') {
        submitWithdraw(subFrom).then(res => {
            console.log(res);
            getList()
            getInfoData()
        })
        return
    }
    // 编辑
    console.log('编辑')
    puttlementOrder(subFrom, opentype.value).then(res => {
        console.log(res);
        getList()
        getInfoData()
    })

}
const { tableData, loading, getList } =
    useTable({
        apiFn: gettlementOrder
    });

const listtes = [
    {
        name: '可提现',
        date: '',
        icon: 'el-icon-collectionTag',
        number: '￥0',
        color: '#2d8cf0',
        ratio: '去提现',
        function: gotoWithdraw
    },
    {
        name: '待结算',
        date: '',
        icon: 'el-icon-help',
        number: '￥0',
        color: '#b37feb',
        ratio: ''
    }
];
const list = reactive(listtes)
const getInfoData = () => {
    canSettleAmount().then(res => {
        console.log(res);
        list[0].number = `￥${res.data.allSettleNum}`
        list[1].number = `￥${res.data.allNotNumSub}`
    })
}
getInfoData()

function setFunDataComngter(row: any) {
    Object.keys(subFrom).forEach(key => {
        subFrom[key] = row[key]
    })
    opentype.value = row._id
    showGetMayBox.value = true
}

</script>

<style lang="scss" scoped>
.top-card {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .top-card-item {
        width: 48%;
        height: 100px;
        background-color: #fff;
        border-radius: 5px;
    }

}
</style>